.pf-c-breadcrumb {
  // Breadcrumb item
  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
  --pf-c-breadcrumb__item--MarginRight: var(--pf-global--spacer--sm);

  // Breadcrumb divider
  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--200);
  --pf-c-breadcrumb__item-divider--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-breadcrumb__item-divider--FontSize: var(--pf-global--FontSize--sm);

  // Breadcrumb link
  --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);

  // Heading
  --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);

  display: inline-flex;
}

// Breadcrumb list
.pf-c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

// Breadcrumb list item
.pf-c-breadcrumb__item {
  display: flex;
  align-items: baseline;
  font-size: var(--pf-c-breadcrumb__item--FontSize);
  font-weight: var(--pf-c-breadcrumb__item--FontWeight);
  line-height: var(--pf-c-breadcrumb__item--LineHeight);
  white-space: nowrap; // Keeps the item-divider and __link text on the same line
  list-style: none;

  &:not(:last-child) {
    margin-right: var(--pf-c-breadcrumb__item--MarginRight);
  }
}

// Breadcrumb divider
.pf-c-breadcrumb__item-divider {
  margin-right: var(--pf-c-breadcrumb__item-divider--MarginRight);
  font-size: var(--pf-c-breadcrumb__item-divider--FontSize);
  line-height: 1;
  color: var(--pf-c-breadcrumb__item-divider--Color);
}

// Breadcrumb link
.pf-c-breadcrumb__link {
  font-size: inherit;
  font-weight: var(--pf-c-breadcrumb__link--FontWeight);
  line-height: inherit;
  word-break: break-word;

  // current item
  &.pf-m-current {
    cursor: default;

    &,
    &:hover {
      color: var(--pf-c-breadcrumb__link--m-current--Color);
      text-decoration: none;
    }
  }
}

.pf-c-breadcrumb__heading {
  display: inline;
  font-size: var(--pf-c-breadcrumb__heading--FontSize);
}

.pf-c-breadcrumb__link,
.pf-c-breadcrumb__heading {
  white-space: normal;
}

// RedHat Font overrides
@include pf-m-overpass-font {
  .pf-c-breadcrumb__link,
  .pf-c-breadcrumb__item {
    font-weight: var(--pf-global--FontWeight--semi-bold);
  }
}

// Hide divider of first child - required for react since dividers are included in each item
// Consider revisiting this in a breaking change release
.pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
  display: none;
  visibility: hidden;
}
